        <h2 class="heading margin-top-md" id="user">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="feather feather-user">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
            </svg>
            Users</h2>
        <h3 id="u-all">Get all users</h3>
        <pre><code>fetch(<span class="c-api">'https://fakestoreapi.com/users'</span>)
            .then(res=>res.json())
            .then(json=>console.log(json))</code></pre>
        <button class="show-output btn btn-outline">Show output</button>
        <pre class="output-result"><code>
            <span class="c-comment">//output</span>
    [
        {
            id:1,
            email:'John@gmail.com',
            username:'johnd',
            password:'m38rmF$',
            name:{
                firstname:'John',
                lastname:'Doe'
            },
            address:{
                city:'kilcoole',
                street:'7835 new road',
                number:3,
                zipcode:'12926-3874',
                geolocation:{
                    lat:'-37.3159',
                    long:'81.1496'
                }
            },
            phone:'1-570-236-7033'
        },
        <span class="c-comment">/*...*/</span>
        {
            id:20,
            email:'...',
            username:'...',
            password:'...',
            name:{
                firstname:'...',
                lastname:'...'
            },
            address:{
                city:'...',
                street:'...',
                number:...,
                zipcode:'...',
                geolocation:{
                    lat:'...',
                    long:'...'
                }
            },
            phone:'...'
        }
    ]
        </code></pre>


        <h3 id="u-single">Get a single user</h3>
        <pre><code>fetch('<span class="c-api">https://fakestoreapi.com/users/1'</span>)
            .then(res=>res.json())
            .then(json=>console.log(json))</code></pre>
        <button class="show-output btn btn-outline">Show output</button>
        <pre class="output-result"><code>
            <span class="c-comment">//output</span>
            {
                id:1,
                email:'John@gmail.com',
                username:'johnd',
                password:'m38rmF$',
                name:{
                    firstname:'John',
                    lastname:'Doe'
                },
                address:{
                    city:'kilcoole',
                    street:'7835 new road',
                    number:3,
                    zipcode:'12926-3874',
                    geolocation:{
                        lat:'-37.3159',
                        long:'81.1496'
                    }
                },
                phone:'1-570-236-7033'
            }
        </code></pre>



        <h3 id="u-limit">Limit results</h3>
        <pre><code>fetch('<span class="c-api">https://fakestoreapi.com/users?limit=5'</span>)
            .then(res=>res.json())
            .then(json=>console.log(json))</code></pre>
        <button class="show-output btn btn-outline">Show output</button>
        <pre class="output-result"><code>
            <span class="c-comment">//output</span>
            [
            {
                id:1,
                email:'John@gmail.com',
                username:'johnd',
                password:'m38rmF$',
                name:{
                    firstname:'John',
                    lastname:'Doe'
                },
                address:{
                    city:'kilcoole',
                    street:'7835 new road',
                    number:3,
                    zipcode:'12926-3874',
                    geolocation:{
                        lat:'-37.3159',
                        long:'81.1496'
                    }
                },
                phone:'1-570-236-7033'
            },
            <span class="c-comment">/*...*/</span>
            {
                id:5,
                email:'...',
                username:'...',
                password:'...',
                name:{
                    firstname:'...',
                    lastname:'...'
                },
                address:{
                    city:'...',
                    street:'...',
                    number:...,
                    zipcode:'...',
                    geolocation:{
                        lat:'...',
                        long:'...'
                    }
                },
                phone:'...'
            }
        ]
        </code></pre>



        <h3 id="u-sort">Sort results</h3>
        <pre><code>fetch('<span class="c-api">https://fakestoreapi.com/users?sort=desc'</span>)
            .then(res=>res.json())
            .then(json=>console.log(json))</code></pre>
        <p>
            <span class="tips">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-zap">
                    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
                </svg>
            </span> The default value is in ascending mode, you can use it with 'desc' or 'asc' as you want.
        </p>
        <button class="show-output btn btn-outline">Show output</button>
        <pre class="output-result"><code>
            <span class="c-comment">//output</span>
        [
            {
                id:20,
                email:'...',
                username:'...',
                password:'...',
                name:{
                    firstname:'...',
                    lastname:'...'
                },
                address:{
                    city:'...',
                    street:'...',
                    number:...,
                    zipcode:'...',
                    geolocation:{
                        lat:'...',
                        long:'...'
                    }
                },
                phone:'...'
            },
            <span class="c-comment">/*...*/</span>
            {
                id:1,
                email:'...',
                username:'...',
                password:'...',
                name:{
                    firstname:'...',
                    lastname:'...'
                },
                address:{
                    city:'...',
                    street:'...',
                    number:...,
                    zipcode:'...',
                    geolocation:{
                        lat:'...',
                        long:'...'
                    }
                },
                phone:'...'
            }
        ]
        </code></pre>




        <h3 id="u-new">Add a new user</h3>
        <pre><code>fetch('<span class="c-api">https://fakestoreapi.com/users'</span>,{
            method:"POST",
            body:JSON.stringify(
                {
                    email:'John@gmail.com',
                    username:'johnd',
                    password:'m38rmF$',
                    name:{
                        firstname:'John',
                        lastname:'Doe'
                    },
                    address:{
                        city:'kilcoole',
                        street:'7835 new road',
                        number:3,
                        zipcode:'12926-3874',
                        geolocation:{
                            lat:'-37.3159',
                            long:'81.1496'
                        }
                    },
                    phone:'1-570-236-7033'
                }
            )
        })
            .then(res=>res.json())
            .then(json=>console.log(json))</code></pre>
        <p>
            <span class="tips">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-zap">
                    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
                </svg>
            </span>If you send an object like the code above, it will return you an object with a new id.
            remember that nothing in real will insert into the database. so if you want to access the new id you will
            get a 404 error.
        </p>
        <button class="show-output btn btn-outline">Show output</button>
        <pre class="output-result"><code>
            <span class="c-comment">//output</span>
            {
                id:21,
                email:'John@gmail.com',
                username:'johnd',
                password:'m38rmF$',
                name:{
                    firstname:'John',
                    lastname:'Doe'
                },
                address:{
                    city:'kilcoole',
                    street:'7835 new road',
                    number:3,
                    zipcode:'12926-3874',
                    geolocation:{
                        lat:'-37.3159',
                        long:'81.1496'
                    }
                },
                phone:'1-570-236-7033'
            }
        </code></pre>



        <h3 id="u-update">Update a users</h3>
        <pre><code>fetch('<span class="c-api">https://fakestoreapi.com/users/7'</span>,{
            method:"PUT",
            body:JSON.stringify(
                {
                email:'John@gmail.com',
                username:'johnd',
                password:'m38rmF$',
                name:{
                    firstname:'John',
                    lastname:'Doe'
                },
                address:{
                    city:'kilcoole',
                    street:'7835 new road',
                    number:3,
                    zipcode:'12926-3874',
                    geolocation:{
                        lat:'-37.3159',
                        long:'81.1496'
                    }
                },
                phone:'1-570-236-7033'
                }
            )
        })
            .then(res=>res.json())
            .then(json=>console.log(json))</code></pre>
        <pre><code>fetch('<span class="c-api">https://fakestoreapi.com/users/7'</span>,{
                method:"PATCH",
                body:JSON.stringify(
                    {
                        email:'John@gmail.com',
                        username:'johnd',
                        password:'m38rmF$',
                        name:{
                            firstname:'John',
                            lastname:'Doe'
                        },
                        address:{
                            city:'kilcoole',
                            street:'7835 new road',
                            number:3,
                            zipcode:'12926-3874',
                            geolocation:{
                                lat:'-37.3159',
                                long:'81.1496'
                            }
                        },
                        phone:'1-570-236-7033'
                    }
                )
            })
                .then(res=>res.json())
                .then(json=>console.log(json))</code></pre>
        <p>
            <span class="tips">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-zap">
                    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
                </svg>
            </span>It will return you an object with sent id. remember that nothing in real will update in the database.
        </p>
        <button class="show-output btn btn-outline">Show output</button>
        <pre class="output-result"><code>
            <span class="c-comment">//output</span>
            {
                id:7,
                email:'John@gmail.com',
                username:'johnd',
                password:'m38rmF$',
                name:{
                    firstname:'John',
                    lastname:'Doe'
                },
                address:{
                    city:'kilcoole',
                    street:'7835 new road',
                    number:3,
                    zipcode:'12926-3874',
                    geolocation:{
                        lat:'-37.3159',
                        long:'81.1496'
                    }
                },
                phone:'1-570-236-7033'
            }
        </code></pre>



        <h3 id="u-delete">Delete a user</h3>
        <pre><code>fetch('<span class="c-api">https://fakestoreapi.com/users/6'</span>,{
            method:"DELETE"
        })
            .then(res=>res.json())
            .then(json=>console.log(json))</code></pre>
        <p>
            <span class="tips">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-zap">
                    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
                </svg>
            </span>The user will not be deleted on the database. but if you sent data successfully it will return you
            the fake deleted user.
        </p>
        <button class="show-output btn btn-outline">Show output</button>
        <pre class="output-result"><code>
            <span class="c-comment">//output</span>
            {
                id:6,
                email:'John@gmail.com',
                username:'johnd',
                password:'m38rmF$',
                name:{
                    firstname:'John',
                    lastname:'Doe'
                },
                address:{
                    city:'kilcoole',
                    street:'7835 new road',
                    number:3,
                    zipcode:'12926-3874',
                    geolocation:{
                        lat:'-37.3159',
                        long:'81.1496'
                    }
                },
                phone:'1-570-236-7033'
            }
        </code></pre>